/*
 * @Author: 自迩
 * @Date: 2022-02-08 20:13:47
 * @LastEditTime: 2022-02-09 17:37:51
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\NoteBox\index.jsx
 */
import React, { Component } from 'react';
import './index.css'

export default class index extends Component {

    state={
        pushPromptFlag:false   //用于控制发布成功提示框的显示
    }

    handleMouseDown = (e)=>{
        e.stopPropagation()
    }

    pushNote = (e)=>{
        let {selectedText,noteBox,addNote} = this.props
        let {input} = this
        localStorage.setItem(selectedText,input.value)
        input.value = ''
        this.setState({pushPromptFlag:true})

        setTimeout(()=>{
            noteBox(false)
            this.setState({pushPromptFlag:false})
            // console.log('pushPromptFlag',this.state.pushPromptFlag);
        },1000)

        addNote(selectedText)
    }

    render() {
        let {noteBoxFlag} = this.props
        let {pushPromptFlag} = this.state
        return (
            <div className='noteBox' style={{display: noteBoxFlag? 'block':'none'}} onMouseDown={this.handleMouseDown}>
                <div className='textareaBox'>
                <textarea ref={ c => this.input=c } name="" id="" cols="30" rows="10" placeholder='写下这一刻的想法'></textarea>
                </div>
                <button className="pushBtn" onClick={this.pushNote}>发布</button>
                <div className='pushPrompt' style={{display:pushPromptFlag? 'block':'none'}} >发布成功</div>
            </div>
        );
    }
}
